<template>
	<div style="margin: 20px">
		<div class="container" ref="container"></div>
	</div>

	<el-button @click="getData">get</el-button>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { graphData } from "./config";
import { BasicFlow } from "./basic-flow";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

const lf = ref<BasicFlow>();
const container = ref<HTMLDivElement>();

const getData = () => {
	console.log(lf.value?.getData());
};

onMounted(() => {
	lf.value = new BasicFlow({
		container: container.value!,
		grid: true,
		// stopMoveGraph: true,
	});

	lf.value.render(graphData);
});
</script>

<style lang="scss" scoped>
.container {
	width: 80vw;
	height: 80vh;
}
</style>
